<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #progress {
            width: 100%;
            height: 30px;
            position: relative;
            background-color: #ddd;
            border-radius: 10px;
            overflow: hidden;
        }
        
        #progress-bar {
            background-color: #d9534f;
            width: 10px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            text-align: center;
            color: white;
            background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
            background-size: 40px 40px;
        }
    </style>
</head>

<body>
    <p>输入时长决定多少秒后出现弹窗</p>
    <input type="text" id="inputSecond">
    <button onclick="myFunc()">点我(n秒后弹出提示框)</button>
    <button onclick="myStopFunc()">点我停止</button>
    <h3 id="result"></h3>
    <p>输入时长来倒计时</p>
    <input type="text" id="timed">
    <button onclick="myFunc2()">点我开始倒计时</button>
    <button onclick="myStopFunc2()">点我停止倒计时</button>
    <button onclick="toCount()">点我继续倒计时</button>
    <p>简易倒计时:</p>
    <h3 id="r1"></h3>
    <p>更改一点的倒计时:</p>
    <h3 id="r2"></h3>
    <h2>下面是进度条</h2>
    <div id="progress">
        <div id="progress-bar"></div>
    </div><br>

    <button onclick="start()">开始进度</button>
    <button onclick="stop()">暂停进度</button>
    <button onclick="reStart()">重新开始</button>
    <script>
        var counter = 0;
        var count = 0;
        var is_timer_on = false;
        var is_timer_on2 = false;
        var t1, t2;

        function timedCount() {
            document.getElementById("result").innerHTML = counter;
            counter++;
            t1 = setTimeout(timedCount, 1000);
        }

        function myFunc() {
            var time = document.getElementById("inputSecond").value;
            counter = 0;
            t = setTimeout(function() {
                alert("你好");
            }, time * 1000);
            if (!is_timer_on) {
                is_timer_on = true;
                timedCount();
            }
        }

        function myStopFunc() {
            clearTimeout(t1);
            clearTimeout(t);
            is_timer_on = false;
        }
        //下面是倒计时

        function unTimedCount() {
            document.getElementById("r1").innerHTML = count;
            let h = Math.floor(count / 3600);
            let m = Math.floor((count - h * 3600) / 60);
            let s = count - h * 3600 - m * 60;
            document.getElementById("r2").innerHTML =
                (h < 10 ? "0" + h : h) + ":" +
                (m < 10 ? "0" + m : m) + ":" +
                (s < 10 ? "0" + s : s);
            count--;
            t2 = setTimeout(unTimedCount, 1000);
        }

        function myFunc2() {
            var time2 = document.getElementById("timed").value;
            count = time2;
            t3 = setTimeout(function() {
                alert("倒计时结束");
            }, time2 * 1000);
            if (!is_timer_on2) {
                is_timer_on2 = true;
                unTimedCount();
            }
        }

        function myStopFunc2() {
            clearTimeout(t2);
            clearTimeout(t3);
            is_timer_on2 = false;
        }

        function toCount() {
            if (count <= 0) {
                alert("倒计时已结束，无法继续");
                return;
            }

            // 停止当前倒计时
            myStopFunc2();

            // 计算剩余时间并重新设置结束定时器
            var remainingTime = count;
            clearTimeout(t3);
            t3 = setTimeout(function() {
                alert("倒计时结束");
                myStopFunc2();
            }, remainingTime * 1000);

            // 继续倒计时
            is_timer_on2 = true;
            unTimedCount();
        }

        //进度条
        var i = 0;
        var bar = document.getElementById("progress-bar");
        var t5;

        function start() {
            t5 = setInterval(progress, 100);
        }

        function progress() {

            if (i < 30) {
                i++;
                bar.style = background = "#d9534f"
                bar.style.width = i + "%";
                bar.innerHTML = i + " %";
            } else if (i >= 30 && i < 60) {
                i++;
                bar.style.width = i + "%";
                bar.innerHTML = i + " %";
                bar.style.background = "orange";
            } else if (i >= 60 && i <= 99) {
                i++;
                bar.style.width = i + "%";
                bar.innerHTML = i + " %";
                bar.style.background = "#ffd900";
            } else {
                bar.style.background = "green";
                clearInterval(t5);
            }
        }

        function stop() {
            clearInterval(t5);
        }

        function reStart() {
            i = 0;
            bar.style.width = "0%";
            bar.innerHTML = "";
            bar.style.background = "#d9534f";

            // 重新开始进度
            startProgress();
        }
    </script>
</body>

</html>